<template>
  <div class="wholesale-detail">
    <div class="block">
      <header>
        <h2>订单信息</h2>
      </header>
      <section class="step">
        <div class="orderDetail">
          <p>订单编号：{{ orderDetail.orderCode }}</p>
          <p>供应商：{{ orderDetail.supplierName }}</p>
          <p>合同名称：{{ orderDetail.contractName }}</p>
          <p>下单人：{{ orderDetail.commitUser }}</p>
        </div>

        <p class="stepTitle">
          <span
            v-for="(item, index) in elStepTitle"
            :key="index"
            :class="{ active: activeStep > index }"
          >
            {{
            item
            }}
          </span>
        </p>
        <el-steps :space="200" :active="activeStep" finish-status="success" align-center>
          <el-step :title="orderDetail.commitDate" />
          <el-step :title="activeStep >= 2 ? orderDetail.passTime : ''" />
          <el-step :title="orderDetail.sureTime" />
        </el-steps>
      </section>
    </div>
    <div class="block">
      <header>
        <h2>收货人信息</h2>
      </header>
      <section>
        <el-row>
          <el-col :span="4">收货联系人：{{consigneeInfo.addressee}}</el-col>
          <el-col
            :span="10"
          >收货地址：{{consigneeInfo.province}}{{consigneeInfo.city}}{{consigneeInfo.area}}{{consigneeInfo.detail}}</el-col>
          <el-col :span="8">联系电话：{{consigneeInfo.addressPhone}}</el-col>
          <el-col :span="5">运费承担方：{{orderDetail.freight}}</el-col>
        </el-row>
      </section>
    </div>
    <div class="block">
      <header>
        <h2>产品信息</h2>
      </header>
      <section>
        产品线：BK
        <!-- <el-editable :columns="C0LUMNS" :data="payload">
          <template slot="default-sureCount" slot-scope="scope">
            <section v-if="scope.row.orderCount > scope.row.inventoryCount">
              <button>-</button><input type="text" :value="scope.row.sureCount" /><button>+</button>
            </section>
            <span v-else>{{ scope.row.sureCount }}</span>
          </template>
        </el-editable>-->
        <el-table
          :data="payload"
          :row-class-name="tableRowClassName"
          :border="true"
          style="margin-top:0"
        >
          <el-table-column type="expand">
            <template slot-scope="scope" v-if="scope.row.backProductList">
              <el-table :data="scope.row.backProductList" class="two-list">
                <!-- <el-table-column style="width:40px"></el-table-column> -->
                <el-table-column property="productCode" label="产品编码" min-width="80"></el-table-column>
                <el-table-column property="productName" label="产品名称(中)" min-width="110"></el-table-column>
                <el-table-column property="barCode" label="条形码" min-width="100"></el-table-column>
                <el-table-column property="factory" label="生产厂家" min-width="100"></el-table-column>
                <el-table-column property="giftFlag" label="是否赠品" min-width="80">
                  <template slot-scope="scope">{{scope.row.giftFlag==='2'?'是':'否'}}</template>
                </el-table-column>
                <el-table-column property="unit" label="最小计量单位" width="110"></el-table-column>
                <el-table-column property="productPrice" label="参考单价(元)" width="120"></el-table-column>
                <el-table-column property="productCount" label="订单数量" width="100"></el-table-column>
                <el-table-column property="inventoryCount" label="库存配位数量" width="120"></el-table-column>
                <el-table-column label="确认数量" min-width="150">
                  <template slot-scope="scope">
                    <el-input-number
                      v-if="scope.row.orderCount > scope.row.inventoryCount&&scope.row.giftFlag!=='2'"
                      v-model="scope.row.sureCount"
                      size="small"
                      :min="scope.row.inventoryCount"
                      :max="scope.row.orderCount"
                    ></el-input-number>
                    <span v-else @click="setCurrent(scope)">{{ scope.row.sureCount }}</span>
                  </template>
                </el-table-column>
                <el-table-column property="shortSupplyCount" label="欠货数量" width="100"></el-table-column>
                <el-table-column property="policyName" label="价格政策" width="100"></el-table-column>
              </el-table>
            </template>
          </el-table-column>
          <el-table-column property="productCode" label="产品编码" min-width="80"></el-table-column>
          <el-table-column property="productName" label="产品名称(中)" min-width="110"></el-table-column>
          <el-table-column property="barCode" label="条形码" min-width="100"></el-table-column>
          <el-table-column property="factory" label="生产厂家" min-width="100"></el-table-column>
          <el-table-column property="giftFlag" label="是否赠品" min-width="80">
            <template slot-scope="scope">{{scope.row.giftFlag==='2'?'是':'否'}}</template>
          </el-table-column>
          <el-table-column property="unit" label="最小计量单位" width="110"></el-table-column>
          <el-table-column property="productPrice" label="参考单价(元)" width="120"></el-table-column>
          <el-table-column property="productCount" label="订单数量" width="100"></el-table-column>
          <el-table-column property="inventoryCount" label="库存配位数量" width="120"></el-table-column>
          <el-table-column label="确认数量" min-width="150">
            <template>
              <!-- <el-input-number
                v-if="scope.row.orderCount > scope.row.inventoryCount&&scope.row.giftFlag!=='2'"
                v-model="scope.row.confirmCount"
                size="small"
                :min="scope.row.inventoryCount"
                :max="scope.row.orderCount"
              ></el-input-number>-->
              <!-- <span v-else @click="setCurrent(scope)">{{ scope.row.sureCount }}</span> -->
            </template>
          </el-table-column>
          <el-table-column property="shortSupplyCount" label="欠货数量" width="100"></el-table-column>
          <el-table-column property="policyName" label="价格政策" width="100"></el-table-column>
        </el-table>
      </section>
    </div>
    <div class="block">
      <header>
        <h2>承运方式</h2>
      </header>
      <section>
        <p>{{orderDetail.transportName}}</p>
      </section>
    </div>
    <div class="block">
      <header>
        <h2>备注信息</h2>
      </header>
      <section>
        <p>{{orderDetail.remark?orderDetail.remark:"无"}}</p>
      </section>
    </div>
    <div class="block">
      <header>
        <h2>附加信息</h2>
      </header>
      <section>
        <div v-show="appendRelateOrder===[]">无</div>
        <el-form label-width="80px" disabled v-for="(item,index) in appendRelateOrder" :key="index">
          <el-form-item :label="item.attributeName" v-if="item.attributeType===1">
            <el-input
              :value="item.attributeValue"
              v-model="item.attributeValue"
              style="width:350px"
            ></el-input>
          </el-form-item>
          <el-form-item :label="item.attributeName" v-if="item.attributeType===2">
            <el-radio-group v-model="item.attributeValue">
              <el-radio :label="item.attributeValue"></el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item :label="item.attributeName" v-if="item.attributeType===3">
            <el-select v-model="item.attributeValue">
              <el-option :label="item.attributeValue" value="1"></el-option>
            </el-select>
          </el-form-item>
          <!-- <el-form-item :label="item.attributeName" v-if="item.attributeType===4">
            <el-date-picker type="date" v-model="item.attributeValue" style="width: 350px;"></el-date-picker>
          </el-form-item>-->
        </el-form>
      </section>
    </div>
    <div class="block">
      <section class="orderTab">
        <div v-for="(item, index) in order_tab" :key="index" class="detail">
          <p
            v-if="item.tabData"
            :class="{ active: activeIndex === index }"
            @click="changeIndex(index)"
          >{{ item.title }}</p>
          <div v-show="activeIndex === index">
            <el-editable :columns="item.columns" :data="item.tabData">
              <template slot="default-action" slot-scope="scope" v-if="item.title === '收货信息'">
                <el-button type="text" @click="showLog(scope.row)">详情</el-button>
              </template>
            </el-editable>
          </div>
        </div>
      </section>
    </div>
    <el-dialog
      title="收货信息"
      :modal="true"
      custom-class="dialog-custom"
      :visible.sync="dialogVisible"
      width="50%"
    >
      <el-editable :data="order_tab[5].tabData" :columns="order_tab[5].columns" />
    </el-dialog>
  </div>
</template>
<script src="./index.js"></script>

<style lang="less" src="./index.less" scoped></style>
